<template>
	<view class="container">
		<view style="position: relative;width: 100%;display: flex;align-items: center;justify-content: center;">
			<textarea :value="neirong" placeholder="请输入反馈内容" @input="inputchange" maxlength="150"></textarea>
			<view class="tip">{{neirong.length}}/150</view>
		</view>
		<view class="meiti">
			<view class="zhanshi">
				<view style="position: relative;" v-for="(item,index) in image" :key="index">
					<image :src="item"></image>
					<image @click="deleteimage(index)" style="width: 40rpx;height: 40rpx;position: absolute;top:0rpx;right: 0rpx;" src="../../static/feed/delete.png"></image>
				</view>
			</view>
			<view @click="chooseimage()" class="meiti-item">
				<image src="../../static/order/tupian.png"></image>
				<view>添加图片</view>
			</view>
		</view>
	</view>
	<view class="bottom">
		<view @click="fankui()" class="button">反馈</view>
	</view>
</template>

<script lang="ts" setup>
	import {ref,reactive} from "vue"
	import http from "@/utils/request.js"
	let neirong=ref('')
	let image=ref([])
	
	function inputchange(e){
		neirong.value=e.detail.value
	}
	function deleteimage(index){
		image.value.splice(index,1)
	}
	function chooseimage(){
		uni.showLoading({
			title:'加载中',
		})
		uni.chooseImage({
			count:3,
			success(res){
				console.log(res)
				image.value=res.tempFilePaths
			},
			fail(err){
				console.log(err)
			},
			complete(){
				uni.hideLoading()
			}
		})
	}
	function shangchuan(file,index){
		return new Promise((resolve,reject)=>{
			uni.uploadFile({
				url:'http://localhost:82/api/images/upload',
				filePath:file,
				name:'file',
				header: { "Content-Type": "multipart/form-data" },
				formData:{
					'user':uni.getStorageSync('userinfo').user_id,
					'use':'fankui'+index,
					'time':Date.now()
				},
				success(result){
					resolve(result)
				},
				fail(err){
					reject(err)
				}
			})
		})
	}
	async function fankui(){
		let imageurls=[]
		if(image.value.length>0){
			const imagepro=image.value.map((item,index)=>shangchuan(item,index))
			const imageresults=await Promise.all(imagepro)
			imageurls=imageresults.map(item=>JSON.parse(item.data).imgUrl)
		}
		let response=http.post('/fankui/addfankui',{
			fankui_order:uni.getStorageSync('userinfo').user_id,
			neirong:neirong.value,
			image1: imageurls[0] || null, 
			image2: imageurls[1] || null,  
			image3: imageurls[2] || null
		})
		response.then(res=>{
			if(res.data.code===200){
				uni.showToast({
					title:'反馈成功',
					duration:1000
				})
				setTimeout(()=>{
					uni.navigateBack()
				},1000)
			}
		})
	}
</script>

<style lang="scss">
.container{
	width: 100%;
	padding: 40rpx 0;
	
	textarea{
		background-color: #fff;
		padding: 20rpx;
		border-radius: 20rpx;
		width: 90%;
		height: 300rpx;
		position: relative;
		box-sizing: border-box;
		
	}
	
	.tip{
		position: absolute;
		bottom:30rpx;
		right: 45rpx;
		color:#d8d8d8;
	}
	.meiti{
		width: 100%;
		display: flex;
		border-bottom:2rpx solid #f2f2f2;
		padding: 20rpx 0;
		
		&-item{
			height: 200rpx;
			margin-right: 40rpx;
			width: 150rpx;
			display: flex;
			border: 4rpx dashed #9c9c9c;
			align-items: center;
			letter-spacing: 0.1em;
			justify-content: center;
			flex-direction: column;
			
			image{
				width: 80rpx;
				height: 80rpx;
			}
		}
	}
	.zhanshi{
		display: flex;
		
		image,video{
			width: 150rpx;
			height: 200rpx;
			margin: 20rpx;
		}
	}
}
.bottom{
		position: fixed;
		bottom: 0;
		width: 100%;
		height: 120rpx;
		background-color: #ffffff;
		display: flex;
		align-items: center;
		justify-content: center;
		
		.button{
			background-color: #f8e177;
			display: flex;
			align-items: center;
			justify-content: center;
			color: #fefbea;
			letter-spacing: 0.2em;
			width: 90%;
			height: 70%;
			border-radius: 50rpx;
			
			&:active{
				opacity: 0.7;
			}
		}
	}
</style>
